<div id="notificationBar"><span class="message"></span><button class="dismiss">Dismiss</button>
</div>
<div id="mainContainer">
	<div id="leftContainer" class="ui-layout-west">
		<div class="dropdown-container">
			<ul class="dropdown" id="visualEditorMenu">
				<li>
					<a id="styleMenu">Style <span class="disclosure">&#9662;</span></a>
					<ul class="sub_menu" id="styleMenuUl">
						<!-- Use CSLEDIT_options populate this menu. -->
					</ul>
				</li>
				<li>
					<a id="editMenu">Edit <span class="disclosure">&#9662;</span></a>
					<ul class="sub_menu">
						<li><a id="menuUndo">Undo</a></li>
						<li><a id="menuRedo">Redo</a></li>
					</ul>
				</li>
			</ul>
		</div>
		<div id="treeEditorPanel" class="panel">
			<div id="treeEditorToolbar" class="toolbar">
				<a class='add' href="#" title="Add node">+</a><a class='delete' href="#" title="Delete node">-</a>
			</div>
			<div id="treeEditor"></div>
		</div>
	</div>

	<div id="rightContainer" class="ui-layout-center">
		<div id="titlebarContainer">
			<div id="titlebar">
				<h3></h3>
			</div>
		</div>
		<ul class="example-citations dropdown">
			<li>
				<a id="example-citations">Example citations <span class="disclosure">&#9662;</span></a>
				<ul class="sub_menu">
					<li><a id="menuEditCitation1">Citation 1</a></li>
					<li><a id="menuEditCitation2">Citation 2</a></li>
					<li><a id="menuEditCitation3">Citation 3</a></li>
				</ul>
			</li>
		</ul>
		<div id=rightSplitterLayout>
			<div id="topRightContainer" class="ui-layout-north">
				<div id="exampleOutput" class="panel">
					<div id="statusMessage"></div>

					<h3>Example Citations</h3>
					<div id="formattedCitations"></div>

					<h3>Example Bibliography</h3>
					<div id="formattedBibliography"></div>
				</div>
			</div>
			<div id="bottomRightContainer" class="ui-layout-center">
				<div id="elementPropertyPanel" class="panel">
					<div id="nodePathView"></div>
					<div id="elementProperties"></div>
				</div>
			</div>
		</div>
	</div>
</div>
